<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		:title="data.navbarTitle||'添加发票'">
	</u-navbar>
	<view class="padding-30rpx">
		<view class="white-bg" style="padding: 0 15px; border-radius: 8px;">
			<u--form labelWidth="160" labelPosition="left" :model="data['form']" :rules="{}" ref="invoiceRef">
				<view class="flex form-item">
					<text class="red-tip">*</text>
					<u-form-item label="发票抬头" labelWidth="135" prop="title" >
						<u--input placeholder="请输入发票抬头" :maxlength="100" v-model="data['form'].title"
							border="none"></u--input>
					</u-form-item>
				</view>
				<view class="flex form-item">
					<text class="red-tip">*</text>
					<u-form-item label="税号" labelWidth="135" prop="taxIdentificationNumber" >
						<u--input placeholder="请输入纳税识别号" :maxlength="50" v-model="data['form'].taxIdentificationNumber"
							border="none"></u--input>
					</u-form-item>
				</view>
        <view class="form-item">
          <u-form-item label="企业地址" prop="address">
            <u--input type="" placeholder="请输入企业地址" :maxlength="200" v-model="data['form'].address"
                      border="none"></u--input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="企业电话" prop="mobile">
            <u--input placeholder="请输入企业电话" v-model="data['form'].mobile"
                      border="none" />
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="开户银行" prop="bankName">
            <u--input placeholder="请输入开户银行" :maxlength="50" v-model="data['form'].bankName"
                      border="none"></u--input>
          </u-form-item>
        </view>
				<u-form-item label="银行账号" prop="bankAccount">
					<u--input type="number" placeholder="请输入银行账号" :maxlength="30" v-model="data['form'].bankAccount"
						border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-checkbox-group v-model="checkboxValue" @change="groupChange">
			<view class="flex-jc-s-b" style="width: 100%;margin: 15px;">
				<text style="font-size: 14px;">设为默认企业发票</text>
				<u-checkbox :size="32" shape="circle" :name="1" :checked="data['form'].defaultFlag === 1"/>
			</view>
		</u-checkbox-group>
	</view>
	<u-modal :show="data.modalShow" @cancel="data.modalShow=false" :showCancelButton="true" @confirm="confirmDelHandle"
		:title="data.modalTitle" :content='data.content'></u-modal>
	<view class="comfig-button flex-center">
		<u-button @click="saveHandle" :customStyle="{'width':'345px',margin:'0'}" type="primary" shape="circle"
			text="保存"></u-button>
		<u-button v-if="data.pageType=='update'"
			:customStyle="{'width':'345px',margin:'15px 0 0 0','background-color':'#EB5940'}" type="error"
			shape="circle" text="删除" @click="data.modalShow=true"></u-button>
	</view>
</template>

<script setup>
	import { reactive} from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { checkMobile, onlyNumber, isPhone, isMobile } from '@/utils/check.js'
  import {titleAddApi, titleDelApi, titleDetailApi, titleEditApi} from './const'
	const data = reactive({
		formRule: {
			title: [{
				required: true,
				message: '请输入发票抬头',
				trigger: ['blur', 'change']
			}],
			taxIdentificationNumber: [{
				required: true,
				message: '请输入税号',
				trigger: ['blur', 'change']
			}],
		},
		pageType: 'add',
		modalShow: false,
		modalTitle: '提示',
		content: '确定要删除该发票吗？',
		navbarTitle: '添加发票',
		form: {
      id: null,
			title: '', //抬头
			taxIdentificationNumber: '', //税号
			address: '', //地址
			mobile: '', //手机号
			bankName: '', //开户银行
			bankAccount: '', //账号
			defaultFlag: 0, //是否默认
      typeCode: 'enterprise'
		}
	})
  const checkboxValue = reactive([])
	onLoad((options) => {
		data.pageType = options.type || 'add'
		options.type === 'update' ? data.navbarTitle = '修改发票' : data.navbarTitle = '添加发票'
    if(options.type === 'update') {
      data['form'].id = options.id
      titleDetailApi(options.id).then((res) => {
        Object.keys(data.form).forEach((key) => { data.form[`${key}`] = res.data[`${key}`] })
      })
    }
	})
  const groupChange = (name) => {
    name[0] === 1? data['form'].defaultFlag = 1 : data['form'].defaultFlag = 0
  }
	const confirmDelHandle = () => {
    titleDelApi(data['form'].id).then(() => {
      uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
      data.modalShow = false
      goBack()
    })
	}
	const saveHandle = () => {
		if (!data.form.title) { uni.showToast({ title: '请输入发票抬头', duration: 1200, icon: "none" }); return }
		if (!data.form.taxIdentificationNumber) {
			uni.showToast({
				title: '请输入税号',
				duration: 1200,
				icon: "none"
			});return}
		// if (data.form.mobile && !isMobile(data.form.mobile)) {
		// 	uni.showToast({
		// 		title: '手机号格式错误',
		// 		duration: 1200,
		// 		icon: "none"
		// 	});return}
    if(data.pageType === 'add') {
      data['form'].id = ''
      titleAddApi(data.form).then((res) => {
        uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
        goBack()
      })
    } else if(data.pageType === 'update') {
      titleEditApi(data.form).then((res) => {
        uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
        goBack()
      })
    }
	}
  const goBack = () => {
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
        success: function () {
          uni.$emit('switchTab','title')
          uni.$emit('getTitleList', 'enterprise')
        }
      })
    },500)
  }
</script>

<style lang="scss" scoped>
	.red-tip {
		color: #EB5940;
		padding: 14px 6px 0 0;
		font-size: 14px;
	}

	.comfig-button {
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: column;
		left: 0;
		bottom: 30px;
	}
  .form-item {
    position: relative;
    border-bottom: 0.1px solid rgba(0,0,0,0.1)
  }
</style>
